<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <!--遍历数组-->
  <!--往数组起始位置添加元素,所有的元素的下表发生改变,再按照下表作为key,进行虚拟MOM比较时,就会发生真实DOM错乱的问题-->
  <button @click="add">添加老刘</button>
  <ul>
    <!--错误的key-->
    <li v-for="(p,index) in persons" :key="index">
      {{p.id}}-{{p.name}}-{{p.age}}<input type="text">
    </li>

    <br/><br/><br/><br/><br/>
<!--正确的key-->
    <li v-for="(p,index) in persons" :key="p.id">
      {{p.id}}-{{p.name}}-{{p.age}}<input type="text">
    </li>
  </ul>

</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#root',
    data: {
      persons: [
        {id: '001', name: '张三', age: 17},
        {id: '002', name: '李四', age: 18},
        {id: '003', name: '王五', age: 19}
      ],
    },
    methods:{
      add(){
        this.persons.unshift({id: '004', name: '老刘', age: 19})
      }
    }
  });
</script>
</body>
</html>
